//柱状图
var barChart = echarts.init(document.querySelector('.bar'));

// 指定图表的配置项和数据
var barOption = {
    title: {
        text: '2017年的注册人数'
    },
    tooltip: {},
    legend: {
        data: ['人数']
    },
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '人数',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130]
    }]
};

// 使用刚指定的配置项和数据显示图表。
barChart.setOption(barOption);

//饼图

var pieChart = echarts.init(document.querySelector('.pie'));

// 指定图表的配置项和数据
var pieOption = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [{
                value: 335,
                name: '直接访问'
            },
            {
                value: 310,
                name: '邮件营销'
            },
            {
                value: 234,
                name: '联盟广告'
            },
            {
                value: 135,
                name: '视频广告'
            },
            {
                value: 1548,
                name: '搜索引擎'
            }
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
pieChart.setOption(pieOption);